<template>
    <div>
        <div class="head">
            <div class="iconfont icon-zuojiantou myicon" @click.stop="back"></div>
            <div class="title">申请列表</div>
        </div>
        <keep-alive>
            <div>
                <ul>
                    <li v-for="(item,index) in $store.state.userRequestMe" :key="item.id" class="userlist" @click.stop="show">
                        <div class="touxiang">
                            <img src="http://admin.xukunqi.com/public/static/headimage.png" width="43" height="43">
                        </div>
                        <div class="name_and_username">
                            <div class="name">
                                {{item.fromName}}
                            </div>
                            <div class="username">
                                琪琪号：{{item.fromid}}
                            </div>
                        </div>
                        <button class="is_agree" @click.stop="agree(item.fromid,item.fromName)">同意</button>
                    </li>
                </ul>
            </div>
        </keep-alive>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Image as VanImage } from 'vant';
    import {select_userRequest} from "../../request/api";
    import Cookies from 'js-cookie';
    import {insert_Friend,delete_item_userRequest,select_Friend} from "../../request/api";

    Vue.use(VanImage);
    export default {
        name: "acceptFriend",

        mounted(){

            //查询有谁想添加我为好友
            let data={
                "fromid":Cookies.get('username')
            }
            select_userRequest(data).then(res=>{
                this.$store.commit("setUserRequestMe",res.data);
            })
        },

        methods:{
            back(){
                this.$router.back();
            },
            show(){
                console.log("啊哈哈哈哈");
            },
            agree(toid,toName){

                //向好友表里面插入两行数据 fromid toid   toid fromid
                let data={
                    "fromid":this.$store.state.myselfAttribute.username,
                    "fromName":this.$store.state.myselfAttribute.name,
                    "toid":toid,
                    "toName":toName,
                }

                insert_Friend(data).then(res=>{
                   if(res.data.type === "success"){

                       //重新渲染好友列表
                       //查询好友列表 存入状态管理
                       let myid={
                           "fromid":this.$store.state.myselfAttribute.username,
                       }
                       select_Friend(myid).then(res=>{
                               this.$store.commit("setFriendList",res.data);
                       })


                       //通知对方重新渲染好友列表
                       let notify_to_reload_friend={
                            "type":"reload_friendList",
                            "notify_to":res.data.notify_to,
                       }
                       console.log("对方的id",res.data.notify_to);
                       this.$store.state.websocket.send(JSON.stringify(notify_to_reload_friend));


                       //删除申请表里的这条记录 并重新渲染列表
                       let delete_item={
                            "fromid":toid,
                            "fromName":toName
                       }
                       delete_item_userRequest(delete_item).then(res=>{
                           if(res.data.type === "success"){

                               //重新查询申请表 并存入状态管理
                               let data={
                                   "fromid":Cookies.get('username')
                               }
                               select_userRequest(data).then(res=>{
                                   this.$store.commit("setUserRequestMe",res.data);
                               })
                           }
                       });
                   }
                });
            },
        }
    }
</script>

<style scoped>
    .head{height: 50px;width: 100%;display: flex;flex-direction: row;}
    .myicon{font-size: 21px;position: fixed;top: 16px;left: 21px;}
    .title{font-size: 18px;line-height: 50px;text-align: center;flex-grow: 1;}

    .userlist{height: 62px;width: calc(100% - 34px);margin: 10px auto;border-bottom: solid 1px #ececec;display: flex;flex-direction: row;position: relative;background-color: #f8f8f8;border-radius: 15px;}
    .touxiang{width: 43px;height: 43px;margin-top: 10px;margin-left: 5px;}
    .name_and_username{margin-left: 10px;}
    .name{font-size: 15px;line-height: 15px;margin-top: 15px;}
    .username{font-size: 12px;line-height: 12px;margin-top: 7px;}
    .is_agree{position: absolute;right: 13px;top: 19px;outline: none;background-color: orange;border-radius: 10px;padding: 3px;border: 1px solid black;}
</style>